import React, {useEffect, useState, useContext} from "react";
import moment from "moment";
import {getTotalAlarmInfo} from "../../api/index";
import Pendect from "../common/Pendect";
import LineChart from "./components/LineChart";
import {commonContext} from "../../context/index";
import Helmet from 'react-helmet'
import {HomPageName, SystemName} from '../common/js/constants'
import styled from 'styled-components'
import {getAlarmStatisticTotal} from "../../api/statistic";
import {getChannelList} from "../../api/channel";

const TitleDiv = styled.h2`
height: 34px;
line-height: 34px;
font-size: 16px;
font-weight: bold;
margin-top: 15px;
margin-bottom: -12px;
`;
const PageTitle = styled.h2`
  padding-bottom: 10px;
  height: 34px;
  line-height: 24px;
  font-size: 16px;
  font-weight: bold;
`;

const HomePage = () => {
	const [alarmSummaryData, setAlarmSummaryData] = useState({});
	const [totalChartData, setTotalChartData] = useState([])

	const [chains, setChains] = useState([])
	// const {castChains: chains} = useContext(commonContext);
	useEffect(() => {
		let didCancel = false;

		const start = moment().startOf('day').format()
		const end = moment().format()
		// console.log(start, end);
		// const params = `?start=${start}&end=${end}&_m=${_m}`
		//获取异常总览数据
		/*getTotalAlarmInfo({
			start,
			end,
			_m
		}).then(res => {
			const {data} = res;
			if (!didCancel) {
				setAlarmSummaryData(data);
			}
		});

		getTotalAlarmInfo({
			start,
			end,

		})*/
		getAlarmStatisticTotal({start, end}).then((res) => {
			// console.log(res);
			// console.log(111)
			setAlarmSummaryData(res)
		})
		//获取节点
		getChannelList({}).then(res => {
			console.log(111, res);
			setChains(res.results)
		})

		return () => {
			didCancel = true;
		};
	}, [])


	return (
		<div>
			{/*<Helmet>
        <title>{HomPageName} - {SystemName}</title>
      </Helmet>*/}
			<PageTitle>当日异常总览</PageTitle>
			<Pendect data={alarmSummaryData}/>
			<LineChart data={{id: ''}}></LineChart>
			<TitleDiv>链路异常</TitleDiv>
			{chains.map(item => {
				return <LineChart data={item} key={item.id}></LineChart>;
			})}
		</div>
	);
};

export default HomePage;
